<script>

import $file from '@/libs/globalFunction/file'
import { FilePreview } from '@/utils/tslCommon'
import { getFileAccessHttpUrl } from '@api/manage'
import { JVXETypes } from '@comp/jeecg/JVxeTable'

export default {
  name: 'FileTableList',
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    // 数据源
    dataSource: {
      type: Array,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    rowNumber: {
      type: Boolean,
      default: false
    },
    rowSelection: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: Number,
      default: 300
    },
    toolbar: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      columns: [
        {
          title: '附件名称',
          key: 'fileName',
          type: JVXETypes.normal,
          width: '220px',
          defaultValue: ''
        },
        {
          title: '文件大小',
          key: 'fileSizeFormat',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '创建人',
          key: 'createBy',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '创建时间',
          key: 'createTime',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '操作',
          key: 'action',
          type: JVXETypes.slot,
          fixed: 'right',
          minWidth: '100px',
          align: 'center',
          slotName: 'action'
        }]
    }
  },
  computed: {
    data() {
      if (this.dataSource && this.dataSource.length > 0) {
        return this.dataSource.map((item, index) => {
          if (item.fileSize) {
            item.fileSizeFormat = $file.calculateFileSize(item.fileSize)
          }
          return item
        })
      }
      return []
    }
  },
  methods: {
    handlePreviewFile({ row }) {
      FilePreview(row.filePath)
    },
    getFileUrl({ row }) {
      return getFileAccessHttpUrl(row.filePath)
    }
  }
}
</script>

<template>
  <j-vxe-table
    keep-source
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :maxHeight="maxHeight"
    :disabled="disabled"
    :rowNumber="rowNumber"
    :rowSelection="rowSelection"
    :toolbar="toolbar"
    :toolbarConfig="{
        slots: ['prefix', 'suffix'],
        btn: disabled ? [] : ['remove', 'clearSelection'],
      }"
  >
    <template v-slot:action="props">
      <a @click="handlePreviewFile(props)">预览</a>
      <a-divider type="vertical" />
      <a target="_blank" rel="noopener noreferrer" :href="getFileUrl(props)">下载</a>
    </template>
  </j-vxe-table>
</template>

<style scoped>

</style>